<template>
	<el-container>
		<el-header>诊断结果界面</el-header>
		<el-main>
			<el-row :gutter="20">
				<el-col :span="4">
					<div class="grid-content bg-purple" align="right">
						姓名：
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple" align="right">
						<el-input v-model="patientname" :disabled="true">
						</el-input>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple" align="right">
						就诊日期：
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple" align="left">
						<div class="block">
							<el-date-picker v-model="value1" :disabled="true" type="date">
							</el-date-picker>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple" align="right">
						就诊医生：
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-input v-model="doctorname" :disabled="true">
						</el-input>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple" align="right">
						诊断结果：
					</div>
				</el-col>
				<el-col :span="18">
					<div class="grid-content bg-purple">
						<el-input v-model="input" :disabled="true">
						</el-input>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple" align="right">
						就诊经过：
					</div>
				</el-col>
				<el-col :span="18">
					<div class="grid-content1 bg-purple">
						<el-form ref="form" :model="form">
							<el-form-item>
								<el-input type="textarea" v-model="form.process" :disabled="true"></el-input>
							</el-form-item>
						</el-form>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple" align="right">
						用药信息：
					</div>
				</el-col>
				<el-col :span="18">
					<div class="grid-content1 bg-purple">
						<el-form ref="form" :model="form">
							<el-form-item>
								<el-input type="textarea" v-model="form.medicine" :disabled="true"></el-input>
							</el-form-item>
						</el-form>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple" align="right">
						医生建议：
					</div>
				</el-col>
				<el-col :span="18">
					<div class="grid-content1 bg-purple">
						<el-form ref="form" :model="form">
							<el-form-item>
								<el-input type="textarea" v-model="form.suggest" :disabled="true"></el-input>
							</el-form-item>
						</el-form>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="16">
					<div class="grid-content bg-purple" align="right">
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple" align="right">
						打印时间：
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content1 bg-purple">
						<el-input v-model="printtime" :disabled="true">
						</el-input>
					</div>
				</el-col>
			</el-row>
		</el-main>
		<el-footer>
			<el-row :gutter="20">
				<el-col :span="4">
					<div class="grid-content bg-purple1">
						<el-button type="primary" @click="openFullScreen">打印</el-button>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="grid-content bg-purple1" align="center"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple1">
						<el-button>
							返回
						</el-button>
					</div>
				</el-col>
			</el-row>
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		name: 'help',
		props: {
			msg: String
		},
		methods: {
			openFullScreen() {
				const loading = this.$loading({
					lock: true,
					text: '正在打印中……',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)',
				});
				setTimeout(() => {
					loading.close();
				}, 2000);
			}
		},
		data() {
			return {
				form: {
					process: '肾脏彩超；腹部平片',
					medicine: '阿托品*1；东莨菪碱*1；乙酰半胱氨酸*2',
					suggest: '多喝水，坚持锻炼，按时复查'
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
				},
				value1: '2021-06-29',
				doctorname: '张医生',
				patientname: '小康',
				input:'肾结石',
				printtime:'2021-06-30'
			}
		}
	}
</script>

<style>
	.el-footer {
		background-color: #4FC1B0;
		color: #333;
		text-align: center;
		line-height: 60px;
		border-radius: 10px;
	}

	.el-header {
		text-align: left;
		font-size: 40px;
		color: #ffffff;
		border-radius: 10px;
		background-color: #4FC1B0;
	}

	.el-main {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		height: 610px;
		font-size: 24px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}


	.bg-purple {
		background: #ffffff;
	}

	.bg-purple1 {
		background: #4FC1B0;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.grid-content1 {
		border-radius: 4px;
		min-height: 134px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
